<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1603752_tyw3r1ce78d.css"/>
	</head>
	<body>
	<div class="header clearfix">
			<div class="logo">
				<img src="img/logo_03.png" >
			</div>
			<div class="h_right clearfix">
				<ul>
					<li>
						
							<h1>首页</h1>
							<p>home</p>
						
					</li>
					<li>
						
							<h1>游戏</h1>
							<p>game</p>
						
					</li>
					<li>
						
							<h1>案例</h1>
							<p>Case</p>
						
					</li>
					<li>
						
							<h1>关于我们</h1>
							<p>About us</p>
						
					</li>
				
				</ul>
				
			</div>
			<div class="h_weixin">
				<img src="img/weixin_03.png" >
			</div>
	</div>
	
	<section class="section">
		<div class="big_img">
				<div class="left">
					<div class="hand">
						<img src="img/hand_03.jpg" >
					</div>
					<div class="left_icon">
						<div class="game"><img src="img/g1_03.png" alt=""></div>
						<div class="game"><img src="img/g2_03.png" alt=""></div>
						<div class="game"><img src="img/g3_03.png" alt=""></div>
						<div class="game"><img src="img/g4_03.png" alt=""></div>
					</div>
				</div>
				<div class="middle">
					<div class="midd_phone">
						<img src="img/phone_03.png">
					</div>
					<div class="game_hid">
						<img src="" class="game_img_hid">
						<!-- <img src="img/white_03.jpg" > -->
					</div>
				</div>
				<div class="right">
					<div class="right_title">
						<h2>我们能给</h2>
						<h1>客户带来的利益</h1>
						<p>每一个细节的处理</p>
						<p>都体现出我们对时尚的不懈追求</p>
						<button type="button">了解更多</button>
					</div>
					<div class="right_icon">
						<div class="game"><img src="img/g5_03.png" alt=""></div>
						<div class="game"><img src="img/g6_03.png" alt=""></div>
						<div class="game"><img src="img/g7_03.png" alt=""></div>
						<div class="game"><img src="img/g8_03.png" alt=""></div>
					</div>
				</div>
			</div>
		
		<div class="step">
			<div class="s_fist">
				<div class="fist_img">
					<img src="img/stepone_12.png" >
				</div>
				<h1>STEP ONE</h1>
				<p>选择一个游戏，换图</p>
			</div>
			<div class="s_second">
				<div class="fist_img">
					<img src="./img/secondstep_12.png" >
				</div>
				<h1>STEP ONE</h1>
				<p>选择一个游戏，换图</p>
			</div>
			<div class="s_third">
				<div class="fist_img">
					<img src="./img/thirdstep_12.png" >
				</div>
				<h1>STEP ONE</h1>
				<p>选择一个游戏，换图</p>
			</div>
		</div>
		<div class="madgame">
			<div class="title">
				<h1>
					狂转游戏
					<span>
						潮流趣味游戏，引发全民G点，疯狂转发。还不马上购买，植入你要传播的产品？
					</span>
				</h1>
				<p>
					<span>Turn</span>
					 mad game
				</p>
			</div>
			<div class="mgame">
				<div class="mg1">
					<div class="mg_title">
						<h1>剑圣传奇</h1>
						<p>
							<span>2014-07-09</span>
							<span>使用次数:20</span>
						</p>
						<a href="javascript:viod(0)" class="mg_btn">购买</a>
						<i class="mg_icon iconfont iconstar">
							
						</i>
					</div>
					
					<div class="mg_img">
						<img src="img/mg_img_07.jpg" >
					</div>
				</div>
				<div class="mg1 ">
					<div class="mg_title">
						<h1>PLAGUE LNC</h1>
						<p>
							<span>2014-07-09</span>
							<span>使用次数:20</span>
						</p>
						<a href="javascript:viod(0)" class="mg_btn">购买</a>
						<i class="mg_icon iconfont iconstar">
							
						</i>
					</div>
					
					<div class="mg_img">
						<img src="img/mg_img_11.jpg" >
					</div>
				</div>
				<div class="mg1">
					<div class="mg_title">
						<h1>地狱边境</h1>
						<p>
							<span>2014-07-09</span>
							<span>使用次数:20</span>
						</p>
						<a href="javascript:viod(0)" class="mg_btn">购买</a>
						<i class="mg_icon iconfont iconstar">
							
						</i>
					</div>
					
					<div class="mg_img">
						<img src="img/mg_img_12_11.jpg" >
					</div>	
				</div>
			</div>
		</div>
	
		<div class="madgame">
			<div class="title">
				<h1>
					抽奖游戏
					<span>
						形式各样抽奖游戏，引发全民尖叫，惊喜不断。还不马上购买，植入你要传播的产品？
					</span>
				</h1>
				<p>
					<span>Lottery</span>
					 game
				</p>
			</div>
			<div class="mgame">
				<div class="mg1">
					<div class="mg_title">
						<h1>功夫西游</h1>
						<p>
							<span>2014-07-09</span>
							<span>使用次数:20</span>
						</p>
						<a href="javascript:viod(0)" class="mg_btn">购买</a>
						<i class="mg_icon iconfont iconstar">
							
						</i>
					</div>
					
					<div class="mg_img">
						<img src="img/mg_img_07.jpg" >
					</div>
				</div>
				<div class="mg1 ">
					<div class="mg_title">
						<h1>宝石迷阵<h1>
						<p>
							<span>2014-07-09</span>
							<span>使用次数:20</span>
						</p>
						<a href="javascript:viod(0)" class="mg_btn">购买</a>
						<i class="mg_icon iconfont iconstar">
							
						</i>
					</div>
					
					<div class="mg_img">
						<img src="img/mg_img_11.jpg" >
					</div>
				</div>
				<div class="mg1">
					<div class="mg_title">
						<h1>植物大战僵尸</h1>
						<p>
							<span>2014-07-09</span>
							<span>使用次数:20</span>
						</p>
						<a href="javascript:viod(0)" class="mg_btn">购买</a>
						<i class="mg_icon iconfont iconstar">
							
						</i>
					</div>
					
					<div class="mg_img">
						<img src="img/mg_img_12_11.jpg" >
					</div>	
				</div>
			</div>
		</div>
		<div class="madgame" style="height: 480px;">
			<div class="title">
				<h1>
					经典案例分享
					<span>
						大家对胖糖的信赖，<br>来源于其产品与需求巧妙结合的经典营销效果。
					</span>
				</h1>
				<p>
					<span>Lottery</span>
					 game
				</p>
			</div>
			<div class="casegame" >
				<div class="cg">
					<div class="cg_left">
						<img src="img/cg_15.jpg" >
						<div class="l_center">
							<h1>24</h1>
							<p>october</p>
						</div>
						<div class="l_icon iconfont iconshoucang">
							
						</div>
					</div>
					<div class="cg_center">
						<h1>南方航空</h1>
						<p>飞行挑战赛</p>
						<p>2014年5月14日--5月27日</p>
						<p>扫码关注微信参加飞行挑战赛并抽奖</p>
						<p>即有机会赢取丰厚奖品</p>
					</div>
					<div class="cg_right">
						<img src="img/cg_18.jpg" >
					</div>
				</div>
				<div class="cg">
					<div class="cg_left">
						<img src="img/cg_15.jpg" >
						<div class="l_center">
							<h1>24</h1>
							<p>october</p>
						</div>
						<div class="l_icon iconfont iconshoucang">
							
						</div>
					</div>
					<div class="cg_center">
						<h1>南方航空</h1>
						<p>飞行挑战赛</p>
						<p>2014年5月14日--5月27日</p>
						<p>扫码关注微信参加飞行挑战赛并抽奖</p>
						<p>即有机会赢取丰厚奖品</p>
					</div>
					<div class="cg_right">
						<img src="img/cg_18.jpg" >
					</div>
				</div>
				<div class="cg">
					<div class="cg_left">
						<img src="img/cg_15.jpg" >
						<div class="l_center">
							<h1>24</h1>
							<p>october</p>
						</div>
						<div class="l_icon iconfont iconshoucang">
							
						</div>
					</div>
					<div class="cg_center">
						<h1>南方航空</h1>
						<p>飞行挑战赛</p>
						<p>2014年5月14日--5月27日</p>
						<p>扫码关注微信参加飞行挑战赛并抽奖</p>
						<p>即有机会赢取丰厚奖品</p>
					</div>
					<div class="cg_right">
						<img src="img/cg_18.jpg" >
					</div>
				</div>
				<div class="cg">
					<div class="cg_left">
						<img src="img/cg_15.jpg" >
						<div class="l_center">
							<h1>24</h1>
							<p>october</p>
						</div>
						<div class="l_icon iconfont iconshoucang">
							
						</div>
					</div>
					<div class="cg_center">
						<h1>南方航空</h1>
						<p>飞行挑战赛</p>
						<p>2014年5月14日--5月27日</p>
						<p>扫码关注微信参加飞行挑战赛并抽奖</p>
						<p>即有机会赢取丰厚奖品</p>
					</div>
					<div class="cg_right">
						<img src="img/cg_18.jpg" >
					</div>
				</div>
			</div>
		</div>
	</section>
	<footer>
		<div class="footer_img">
			<div class="foot_right ">
				<img src="img/footimg1_03.png" >
			</div>
			<p>Copyright © 2014 Pangtang. All Rights Reserved. 版权所有</p>
			<div class="foot_left ">
				<img src="img/footimg2_03.png" >
			</div>
		</div>
	</footer>
	
	<script type="text/javascript">
		var phone_img = document.querySelector(".game_hid");
		var hid_img = document.querySelector(".game_img_hid");
		var game = document.querySelectorAll(".game")
		var arr = [
			"img/phoneimg_03.jpg",
			"img/white_03.jpg"
		]
		game.forEach((val,index) => {
			val.onclick = function() {
				// if(hid_img.style.transform == "translate(0px)"){
				// 	hid_img.style.transform = "translate(263px)"
				// }else{
				// 	hid_img.style.transform = "translate(0)"
					
				// }
				hid_img.src = arr[index]
				// hid_img.style.transform = "translate(0)"
				console.log(index);
				
				// hid_img.style.transform = "translate(0)"
				// console.log(document.querySelectorAll(".game")[3]);
				// if (phone_img.style.visibility == "visible") {
				// 	hid_img.src = "img/white_03.jpg";
				// 	phone_img.style.visibility = "hidden";
				// } else {
				// 	phone_img.style.visibility = "visible";
				// }
			}
		});
		
	</script>
	</body>
</html>
